<template>
  <el-card>
    <div class="header">
      <el-form label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="目录名称">
              <el-input placeholder="请输入目录名称"
                        size="small"
                        style="width:200px" />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="目录名称">
              <el-input placeholder="请输入目录名称"
                        size="small"
                        style="width:200px" />
              <el-button type=""
                         style="margin-left: 20px"
                         size="small">取 消</el-button>
              <el-button type="primary"
                         style="background-color: #409eff; color:#fff"
                         size="small">搜 索</el-button>
            </el-form-item>

          </el-col>
          <el-col :span="2">
            <el-button type="success"
                       icon="el-icon-edit"
                       size="small"
                       style="background: #67c23a; color: #fff"
                       @click="addShowDia = true">新增目录</el-button>
          </el-col>

        </el-row>
      </el-form>
    </div>
    <!-- 文字提示 -->
    <el-alert :title="`${total}条消息`"
              type="info"
              show-icon
              :closable="false" />

    <el-table :data="direList">
      <el-table-column label="序号"
                       type="index" />
      <el-table-column label="所属学科"
                       prop="subjectName" />
      <el-table-column label="目录名称"
                       prop="directoryName" />
      <el-table-column label="创建者">
        <template #default="{row}">
          {{ row.creatorID === 2 ? '超级管理员': '编辑者' }}
        </template>
      </el-table-column>
      <el-table-column label="创建日期"
                       prop="addDate" />
      <el-table-column label="面试题数量"
                       prop="totals" />
      <el-table-column label="状态">
        <template #default="{row}">
          {{ row.state === 1 ? '已启用': '已禁用' }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button type="text"
                     @click="handleDisabled(row)">{{ row.state ===1 ? '禁用' : '启用' }}</el-button>
          <el-button type="text"
                     :disabled="row.state===1"
                     @click="handleOpenEdit(row.id)">修改</el-button>
          <el-button type="text"
                     :disabled="row.state===1"
                     @click="handleDel(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="page">
      <el-pagination :current-page="query.page"
                     :page-sizes="[2, 3, 5, 10]"
                     :page-size="query.pagesize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" />
    </div>
    <!-- 新增弹窗 -->
    <Dialog :show-dia.sync="addShowDia" />
    <!-- 编辑弹窗 -->
    <Dialog :show-dia.sync="editShowDia"
            :edit-id="EditId" />
  </el-card>

</template>

<script>
import { getDirectoryListAPI2, updateState, delDirAPI } from '@/api/subject'
import Dialog from '../components/add-dialog.vue'
export default {
  name: 'DirectoryView',
  components: {
    Dialog
  },
  data () {
    return {
      direList: [],
      total: 0,
      query: {
        page: 1,
        pagesize: 10
      },
      addShowDia: false,
      // 编辑
      editShowDia: false,
      // 要编辑的id
      EditId: 0
    }
  },
  watch: {
    addShowDia () {
      if (this.addShowDia === false) {
        this.getDirectoryList()
      }
    },
    editShowDia () {
      if (this.editShowDia === false) {
        this.getDirectoryList()
      }
    }
  },
  created () {
    this.getDirectoryList()
  },
  methods: {
    async getDirectoryList () {
      let res = null
      if (this.$route.query.id) {
        res = await getDirectoryListAPI2({ ...this.query, subjectID: this.$route.query.id })
      } else {
        res = await getDirectoryListAPI2({ ...this.query })
      }

      console.log(res)
      this.total = res.counts
      this.direList = res.items
    },
    handleSizeChange (val) {
      this.query.pagesize = val
      this.getDirectoryList()
    },
    handleCurrentChange (val) {
      this.query.page = val
      this.getDirectoryList()
    },
    // 打开修改
    handleOpenEdit (id) {
      this.editShowDia = true
      this.EditId = id
    },
    // 禁用状态
    async handleDisabled (row) {
      if (row.state === 1) {
        await updateState(row.id, 0)
      } else {
        await updateState(row.id, 1)
      }
      this.getDirectoryList()
    },
    // 删除
    async handleDel (id) {
      try {
        await this.$confirm('确定删除嘛？', '提示', {
          type: 'warning'
        })
        await delDirAPI(id)
        this.$message.success('删除成功')
        this.getDirectoryList()
      } catch (e) {
        this.$message.error('已取消')
      }
    }
  }
}
</script>

<style scoped lang="scss">
/* .el-card {
  margin: 20px;
} */
</style>
